<template>
    <div>
        子组件：
        <input :type="mytype" v-model="vmodel" @input="$emit('sonMethod',vmodel)"  />
        子组件内部的vModel的值：{{vmodel}}
    </div>
</template>
<script>
export default {
    data() {
        return {
            mytype:this.type,
            myvalue:this.value,
            sonValue:"",
            //这里只有获取一次的原因是：
            //vue实例初始化的时候，会优先初始化data
            //必须data初始完以后，才能执行后面的计算属性，methods等
            // vmodel:this.vModel
            newSon:this.vModel
        }
    },
    //子组件 接收父组件传的参数
    props:["type","value","vModel"],
    //直接使用侦听器，监控 父传子的值的变化！
    watch:{
        //一旦vModel的值发生改变，将会 触发 这个函数！
        //后面的2个参数就是vModel父过来的值，一个改变后的值，一个是之前的值！
       vModel:function(newValue,oldValue){
            console.log("监听的值的旧值：",oldValue);
            this.newSon = newValue;
       } 
    },
    //计算属性
    computed:{
        vmodel:{
            set:function(v){
                this.vmodel = v
            },
            get:function(){
                return this.vmodel
            }
        }
    }
    
}
</script>